<template>
  <!--我的笔记-->
  <div class="myNote">
    <div class="note-top">
      <span :class="indexBj == 0?'note-border':''" @click="changeBj(0)">课堂笔记</span>
      <!--<span :class="indexBj == 1?'note-border':''" @click="changeBj(1)">题目笔记</span>-->
    </div>
    <div class="discussAndReplyDiv">
      <template v-for="(item,index) in interactionAreaData">
        <div class="itemDiv clearFloat" :key="index">
          <el-avatar :size="40" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" class="lf"></el-avatar>
          <div class="lf">
            <div class="discussBox">
              <div class="commonNameP">{{item.courseName}}</div>
              <p class="commonContentP">{{item.note}}</p>
              <div class="clearFloat commonTimeDiv">
                <span class="lf">{{item.createTime}}</span>
              </div>
              <!--<div class="lf" style="width: 100%;">-->
                <!--<div class="bjBtn">修改笔记</div>-->
              <!--</div>-->
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>

</template>
<script>
    import {centerNotequeryCourseNote} from '@/request/api'
  export default {
    data () {
      return {
        indexBj: 0,
        interactionAreaData:[]
      }
    },
    mounted() {
      this.getList1()
    },
    methods: {
      getList1() {
        const loading = this.openLoading();
        var params = {
          "_search": true,
          "bgTm": "",
          "data": {
            "userId": JSON.parse(localStorage.getItem('userInfo')).id
          },
          "endTm": "",
          "pageNumber": 1,
          "pageSize": 20
        }
        centerNotequeryCourseNote(params).then(res=> {
          if(res.code == 200) {
            this.interactionAreaData = res.data.records
            if(this.interactionAreaData.length!=0) {

            }else {
              this.$message({
                message: '暂无记录',
                type: 'warning',
                offset: '500'
              });
            }
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
      changeBj(index) {
        this.indexBj = index;
      }
    }
  }
</script>
<style scoped>
  .myNote {

  }
  .note-top {
    height: 48px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 20px;
  }
  .note-top span {
    display: inline-block;
    width: 80px;
    height: 100%;
    line-height: 40px;
    margin-right: 55px;
    text-align: center;
    font-size: 20px;
    color: #9A9A9A;
  }
  .note-border {
    border-bottom: 2px solid #22944E;
    color: #22944E;
  }
  .discussAndReplyDiv {
    background: #fff;
    box-sizing: border-box;
  }
  .discussAndReplyDiv .itemDiv {
    padding: 30px;
    border-bottom: 1px solid #e5e5e5;
  }
  .discussAndReplyDiv /deep/ .el-avatar,.replyBox /deep/ .el-avatar{
    margin-right:16px;
  }
  .discussAndReplyDiv .itemDiv>div,.replyBox>div{
    width:calc( 100% - 56px );
  }
  .commonTimeDiv span,.commonTimeDiv div{
    font-size: 14px;
    line-height: 14px;
  }
  .commonTimeDiv span{
    color: #999;
    margin-right:40px;
  }
  .commonTimeDiv div{
    color: #22944E;
    cursor:pointer;
  }
  .commonNameP{
    font-size: 18px;
    font-weight: 400;
    color: #333333;
    margin-bottom:16px;
  }
  .commonContentP{
    font-size: 16px;
    color: #666666;
    margin-bottom:16px;
  }
  .bjBtn {
    float: right;
    width: 100px;
    height: 40px;
    background: #22944E;
    border-radius: 4px;
    font-size: 16px;
    text-align: center;
    color: #FFFFFF;
    line-height: 40px;
    margin-top: 20px;
  }
</style>
